<template>
  <section>
    <div class="filter-container">
        <el-select size="mini" v-model="listQuery.catId" placeholder="服务类型" clearable>
            <el-option v-for="item in cat_list" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
        <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="服务名称" v-model="listQuery.name" />
        <el-select size="mini" v-model="listQuery.status" class="ml10" placeholder="服务状态" clearable>
            <el-option label="可用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
        </el-select>
        <el-select v-if="!isFree" size="mini" v-model="listQuery.isFree" class="ml10" placeholder="是否付费" clearable>
            <el-option label="付费" value="2"></el-option>
            <el-option label="免费" value="1"></el-option>
        </el-select>
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
    </div>
    <el-table ref="dataTable" :height="tableHeight" :data="list"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column align="left" label="服务编号">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="服务类型">
                <template slot-scope="scope">
                    <span>{{scope.row.catName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="价格状态">
                <template slot-scope="scope">
                    <span>{{scope.row.isFreeText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="服务名称">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="金额">
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="天数">
                <template slot-scope="scope">
                    <span>{{scope.row.days}}天</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否默认">
                <template slot-scope="scope">
                    <span>{{scope.row.isDefaultText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="服务状态">
                <template slot-scope="scope">
                    <span>{{scope.row.statusText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序">
                <template slot-scope="scope">
                    <span>{{scope.row.orderNum}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" width="150" sortable="custom" prop="created_at">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" 
                    fixed="right" width="130">
                <template slot-scope="scope">
                    <span v-if="!isSelect">
                        <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.canDelete==1" type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </span>
                    <span v-else-if="scope.row.status==1">
                        <el-button type="text" @click="handleSelect(scope.row)">选择</el-button>
                    </span>
                </template>
            </el-table-column>
    </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

    <el-dialog append-to-body :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="900px">
        <el-form :model="form" :rules="rules" ref="form" label-width="150px">
            <el-form-item label="服务类型" prop="catId">
                <el-radio-group v-model="form.catId">
                    <el-radio v-for="item in cat_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否付费" prop="isFree">
                <el-radio-group v-model="form.isFree">
                    <el-radio v-for="item in is_free_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务名称" prop="name">
                <common-input v-model="form.name" class="w200" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="服务图片" prop="picture">
                <pic-sel style="float:left" v-model="form.picture" :maxNum="1" />
            </el-form-item>
            <el-form-item label="服务说明" prop="description">
                <common-input v-model="form.description" placeholder="请输入服务说明" />
            </el-form-item>
            <el-form-item label="金额" prop="price" v-if="!form.isFree">
                <el-input type="number" size="mini" class="w200" v-model="form.price" placeholder="元" maxlength="10" />
            </el-form-item>
            <el-form-item label="天数" prop="days">
                <el-input type="number" size="mini" class="w200" v-model="form.days" placeholder="天" maxlength="10" />
            </el-form-item>
            <el-form-item label="是否默认" prop="isDefault">
                <el-radio-group v-model="form.isDefault">
                    <el-radio v-for="item in is_default_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio v-for="item in status_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" prop="orderNum">
                <common-input v-model="form.orderNum" class="w60" maxlength="3" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible=false">取消</el-button>
            <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="create('form')">确定</el-button>
            <el-button size="mini" v-else type="primary" @click="update('form')">确定</el-button>
        </div>
    </el-dialog>

  </section>
</template>

<script>
    import {
        isIntegerNotMust
    } from '../../utils/validator'
    import {
        project_save,
        project_list,
        project_delete,
        project_detail
    } from '../../api/product';
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        components: {
            'pic-sel': () => import('../../components/PicSel/index'),
        },
        props: {
            formData: Object
        },
        data() {
            return {
                isFree: false,
                status_list: [
                    {
                        value: 1,
                        label: '启用'
                    },
                    {
                        value: 0,
                        label: '禁用'
                    }
                ],
                cat_list: [
                    {
                        value: 1,
                        label: '合伙人'
                    },
                ],
                is_free_list: [
                    {
                        value: 0,
                        label: '付费'
                    },
                    {
                        value: 1,
                        label: '免费'
                    }
                ],
                is_default_list: [
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
                dialogProductVisible: false,
                productSelectForm: {
                    is_select: true,
                    is_sku: true,
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入服务名称',
                            trigger: 'blur'
                        }
                    ],
                    catId: [
                        {
                            required: true,
                            message: '请选择服务类型',
                            trigger: 'blur'
                        }
                    ],
                    isFree: [
                        {
                            required: true,
                            message: '请选择是否付费',
                            trigger: 'blur'
                        }
                    ],
                    status: [
                        {
                            required: true,
                            message: '请选择服务状态',
                            trigger: 'blur'
                        }
                    ],
                    // picture: [
                    //     {
                    //         required: true,
                    //         message: '请选择服务图片',
                    //         trigger: 'blur'
                    //     }
                    // ],
                    days: [
                        {
                            required: true,
                            message: '请输入服务天数',
                            trigger: 'blur'
                        }
                    ],
                    orderNum: [
                        {
                            validator: isIntegerNotMust,
                            trigger: 'blur'
                        }
                    ]
                },
                form: {
                    id: undefined,
                    name: undefined,
                    picture: undefined,
                    catId: undefined,
                    isFree: 0,
                    status: 1,
                    description: undefined,
                    days: undefined,
                    price: undefined,
                    isDefault: 0,
                },
                dialogStatus: '',
                dialogFormVisible: false,
                textMap: {
                    update: '编辑服务',
                    create: '新增服务'
                },

                isSelect: false,
                viewerId: null,
                orderLoading: false,
                tableHeight: 200,
                list: null,
                listLoading: true,
                listQuery: {
                    pageNum: this.$route.query.pageNum || 1,
                    pageSize: this.$route.query.pageSize || 20,
                    name: this.$route.query.name,
                    orderCol: "",
                    orderAsc: "",
                    status: undefined,
                    catId: undefined,
                    isFree: undefined,
                },
                total: null,
                activeName: '1',
                currentId: 0,
                checkLoading: false,
                dialogOrderVisible: false,
                orderForm: {
                    id: 0,
                    orderNum: 0,
                },
                productForm: {
                    id: 0,
                    hasSku: 0,
                    skuInfo: [],
                    inventory: 0,
                },
                dialogStockVisible: false,
                stockLoading: false,
                ids: [],
                selectedIdx: undefined,
            }
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    this.isSelect = val.is_select;
                    if(val.is_free) {
                        this.isFree = true;
                    }

                    // console.log(val)
                }
            }
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            this._getTableHeight();
            this.getList();
        },
        methods: {
            handleSelect(item) {
                this.$emit('okSelect', item);
            },
            handleCreate() {
                this.resetTemp();
                this.dialogStatus = 'create';
                this.dialogFormVisible = true;
            },
            create(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        if(!this.form.orderNum) {
                            this.form.orderNum = 0;
                        }
                        project_save(this.form)
                            .then(() => {
                                this.dialogFormVisible = false;
                                this.getList();
                                this.$message.success("服务创建成功");
                            })
                    } else {
                        return false;
                    }
                });
            },
            update(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        if(!this.form.orderNum) {
                            this.form.orderNum = 0;
                        }

                        project_save(this.form).then(() => {
                            this.dialogFormVisible = false;
                            this.getList();
                            this.$message.success("服务更新成功");
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetTemp() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    picture: undefined,
                    catId: 1,
                    isFree: 0,
                    status: 1,
                    description: undefined,
                    days: undefined,
                    price: undefined,
                    isDefault: 0,
                };
            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 250
            },
            getList() {
                if(this.isFree) {
                    this.listQuery.isFree = "1";
                }
                this.listLoading = true;
                project_list(this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.status = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleUpdate(row) {
                project_detail(row.id)
                    .then(response => {
                        this.form = response.data;
                        this.dialogFormVisible = true;
                        this.dialogStatus = 'update';
                    });
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        project_delete(row.id)
                            .then(() => {
                                this.$message.success("服务删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            },
            dialogClose() {
                this.$refs.form.resetFields();
            },
            tblSort(d) {
                this.listQuery.orderCol = d.prop;
                this.listQuery.orderAsc = d.order;

                this.handleFilter();
            },
        }
    };
</script>
<style lang="scss" scoped>
</style>
